<script type="text/ecmascript-6">
import Menu from 'ant-design-vue/es/menu';

const { Item, SubMenu } = Menu;

export default {
  props: {
    dataList: {
      type: Array,
      default: () => []
    },

    openKeys: {
      type: Array,
      default: () => []
    },

    selectedKeys: {
      type: Array,
      default: () => []
    },

    menuViewOption: {
      type: Object,
      required: true
    }
  },

  data() {
    return {
      sOpenKeys: [],
      // openKeys: [],
      menuTheme: 'light',
      mode: 'inline'
    };
  },

  methods: {
    renderMenu: function(h, menuTree) {
      const this_ = this;
      const menuArr = [];
      menuTree.forEach(function(menu) {
        menuArr.push(this_.renderItem(h, menu));
      });
      return menuArr;
    },

    renderItem: function(h, menu) {
      return (menu.children && menu.children.length) ? this.renderSubMenu(h, menu) : this.renderMenuItem(h, menu);
    },

    renderSubMenu: function(h, menu) {
      const this_ = this;
      const subItem = [h('div',
        {
          slot: 'title',
          class: {
            'my_menu_selected': menu[this_.menuViewOption.key] === this.selectedKeys[0]
          },
          attrs: { style: 'overflow: hidden; white-space: nowrap; text-overflow: ellipsis;font-size: 16px;font-weight: 600;', title: menu[this_.menuViewOption.key] },
          // attrs: { style: 'overflow:hidden;white-space:normal;text-overflow:clip;font-size: 16px;font-weight: 600;' },
          on: {
            click: () => {
              const key = menu[this_.menuViewOption.key];
              if (this_.selectedKeys[0] !== key) {
                this.$emit('select', {
                  ...menu,
                  key: menu[this_.menuViewOption.key],
                  clickByFather: true
                });
              }
            }
          }
        },
        [
          menu[this_.menuViewOption.menuTitle]
        ]
      )];

      const itemArr = [];

      menu.children.forEach(function(item) {
        itemArr.push(this_.renderItem(h, item));
      });

      return h(SubMenu,
        {
          key: menu[this.menuViewOption.key]
        },
        subItem.concat(itemArr)
      );
    },

    renderMenuItem: function(h, menu) {
      const tag = 'span';
      return h(
        Item, { key: menu[this.menuViewOption.key] },
        [
          h(tag,
            {
              style: 'overflow: hidden; white-space: nowrap; text-overflow: ellipsis;',
              attrs: {
                title: menu[this.menuViewOption.itemTitle]
              }
            },
            [
              menu[this.menuViewOption.itemTitle]
            ]
          )
        ]
      );
    }

  },

  render(h) {
    const { dataList } = this;
    return h(
      Menu,
      {
        props: {
          theme: this.menuTheme,
          mode: this.mode,
          selectedKeys: this.selectedKeys,
          openKeys: this.openKeys ? this.openKeys : this.sOpenKeys,
          defaultSelectedKeys: this.defaultSelectKey
        },

        on: {
          'update:openKeys': (val) => {
            this.$emit('openKeys', val);
          },

          click: (obj) => {
            // this.selectedKeys = [obj.key];
            this.$emit('select', obj);
          }
        }

      }, this.renderMenu(h, dataList)
    );
  }
};
</script>
